<template>
  <fullScreenContainer
    type="fullScreenContainer"
    :leftList="leftList"
    title="湖南省优势特色产业集群可视化分析"
  >
    <template slot="leftContent">
      <Panel key="jdfj" title="项目区信息概览" height="30%">
          <div style="display: flex" class="jdfj">
            <div class="bg-box-1" v-for="item,index in xmgl">
              <div class="bg-box-1-icon">
                <img :src="box1[index]" alt="" srcset="">
              </div>
              <div class="bg-box-1-number" style="align-items: center;">
                <span class="color">{{ item.num }}</span>
                <span class="unit">家</span>
              </div>
              <div class="bg-box-1-text">
                <span>{{ item.name }}</span>
              </div>
            </div>
            <div>
            </div>
          </div>
      </Panel>
      <Panel key="jdfl" title="项目区企业分布概览" class="flex1" height="70%">
        <div style="display: flex" class="jdfl">
          <box3 title="上游"></box3>
          <div class="right" v-if="qyfbgl && qyfbgl.length > 1">
            <box2 :title="qyfbgl[0].name" :number="qyfbgl[0].num"></box2>
            <box2 :title="qyfbgl[1].name" :number="qyfbgl[1].num" class="bottom"></box2>
          </div>
        </div>
        <div style="display: flex" class="jdfl jdfl-two">
          <box3 title="中游"></box3>
          <div class="right" v-if="qyfbgl && qyfbgl.length > 3">
            <box2 :title="qyfbgl[2].name" :number="qyfbgl[2].num"></box2>
            <box2 :title="qyfbgl[3].name" :number="qyfbgl[3].num" class="bottom"></box2>
          </div>
        </div>

        <div style="display: flex" class="jdfl jdfl-two">
          <box3 title="下游"></box3>
          <div class="right" v-if="qyfbgl && qyfbgl.length > 5">
            <box2 :title="qyfbgl[4].name" :number="qyfbgl[4].num"></box2>
            <box2 :title="qyfbgl[5].name" :number="qyfbgl[5].num" class="bottom"></box2>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="cgmj" title="种植面积趋势分析" class="flex1" height="35%">
        <echartDemo key="a" :initData="sxbars2" :initChart="line"></echartDemo>
      </Panel>
      <Panel key="xjnrfx" title="产量趋势分析" class="flex1" height="35%">
        <echartDemo
          key="b"
          title="吨"
          :initData="sxbars3"
          :initChart="line"
        ></echartDemo>
      </Panel>
      <Panel key="rsfx" title="产业产值趋势分析" class="flex1" height="30%">
        <echartDemo
          key="c"
          title="亿元"
          :initData="sxbars4"
          :initChart="line"
        ></echartDemo>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
         <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools @projectIconChange="projectIconChange" :projectList="projectList"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/project.vue'
import qy from "./images/qy.png";
import ymjd from "./images/ymjd.png";
import zzjd from "./images/zzjd.png";
import box2 from "../templateBigScreen/box2.vue";
import box3 from "../templateBigScreen/box3.vue";
import line from "./line/initChart";
import barsline from "./barsline";
import echartDemo from "@/echartsDemo/index.vue";
import projectLayerData from "../templateBigScreen2/gisData/projectLayerData";
import industryLayerData from '../templateBigScreen2/gisData/industryLayerData';
import xzqhData from "../templateBigScreen2/gisData/qxxzqh";
export default {
  components: {
    Map,
    MapTools,
    box2,
    box3,
    echartDemo,
  },
  methods: {
    getSjkb() {
      var ss = this.$api.bigScreenIndex.getSjkb(this.layerType);
      ss.then((res) => {
        // 数据看板-项目区信息概览
        this.xmgl = res.data.bigScreenXmgl;
        console.log(this.xmgl);
        // 数据看板-项目区企业分布概览
        this.qyfbgl = res.data.bigScreenQyfbgl;
        // 数据看板-茶园面积趋势分析
        for(let i=0;i< res.data.bigScreenCyjdmjfx.length;i++){
           this.sxbars2.xAxisData.push(res.data.bigScreenCyjdmjfx[i].year);
           this.sxbars2.seriesData.push({value: res.data.bigScreenCyjdmjfx[i].area, name: res.data.bigScreenCyjdmjfx[i].year});
        }
        //数据看板-茶产量趋势分析
        for(let i=0;i< res.data.bigScreenCyclqsfx.length;i++){
           this.sxbars3.xAxisData.push(res.data.bigScreenCyclqsfx[i].year);
           this.sxbars3.seriesData.push({value: res.data.bigScreenCyclqsfx[i].production, name: res.data.bigScreenCyclqsfx[i].year});
        }
        //数据看板-产业产值趋势分析
        for(let i=0;i< res.data.bigScreenCyczqsfx.length;i++){
           this.sxbars4.xAxisData.push(res.data.bigScreenCyczqsfx[i].year);
           this.sxbars4.seriesData.push({value: res.data.bigScreenCyczqsfx[i].outputValue, name: res.data.bigScreenCyclqsfx[i].year});
        }
      });
    },
    projectIconChange(value) {
      this.showGisLayer(value, this.projectLayerData, 1);
    },
    showGisLayer(layerType, layerData, type) {
      this.clearGisLayer();
      if (layerType && layerData && layerData.length > 0) {
        const layerTypeArray = layerType.split(',').map(pid => parseInt(pid, 10));
        const layersToShow = layerTypeArray.map(pid => this.findLayerByPid(type, pid)).filter(layer => layer !== undefined);
        if (type === 0) {
          this.displayLayers(layersToShow);
        } else {
          this.displayProjectLayers(layersToShow)
        }
      }
    },


    findLayerByPid(type, pid) {
      const layerData = type === 0 ? this.industryLayerData : this.projectLayerData;
      return layerData.find(layer => layer.pid === pid);
    },

    displayProjectLayers(layers) {
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.xzqh.forEach(xzqhItem => {
          const multiPolygon = this.getMultiPolygonByCode(xzqhItem.code);
          const coordinates = multiPolygon.geometry.coordinates;
          const properties = multiPolygon.properties;
          const html = this.buildProjectIconHtml(xzqhItem.dbzp);
          htmlData.push({
            x: properties.x,
            y: properties.y,
            html: html
          })
          coordinates.forEach(coord => {
            mergedPolygon.push({
              polyArr: coord,
              style: {
                color: layer.material.polygon.color,
                alpha: layer.material.polygon.alpha
              }
            })
          });
        })
        this.addGisLayer(mergedPolygon, htmlData);
      })
    },

    buildProjectIconHtml(dbzp) {
      let resHtml = '';
      if (dbzp && dbzp.length) {
        dbzp.forEach((item, index1) => {
          resHtml += `<div class="label-container purple-background">
                    <img src="${item.icon}" alt="图标" class="icon">
                    <span class="label-text">${item.name}</span>
                  </div>`;
        });
      }
      return resHtml;
    },

    buildIndustryIconHtml(dbzp) {
      if (!dbzp || !dbzp.length) return '';
      const containerClass = 'label-container purple-background';
      const iconClass = 'label-icon2';
      const textClass = 'label-text2';
      return dbzp.map(item => {
        const textStyle = `background-color: ${item.color || '#FFF482'}`;
        return `
            <div class="${containerClass}">
              <img src="${item.icon}" alt="图标" class="${iconClass}">
              <span class="${textClass}" style="${textStyle}">${item.name}</span>
            </div>
          `;
      }).join('');
    },


    displayLayers(layers) {
      // 实现显示图层的逻辑
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.cyd.forEach(cydItem => {
          cydItem.xzqh.forEach(xzqh => {
            const multiPolygon = this.getMultiPolygonByCode(xzqh.code);
            const coordinates = multiPolygon.geometry.coordinates;
            const properties = multiPolygon.properties;
            const html = this.buildIndustryIconHtml(xzqh.dbzp);
            htmlData.push({
              x: properties.x,
              y: properties.y,
              html: html
            })
            coordinates.forEach(coord => {
              mergedPolygon.push(
                {
                  polyArr: coord,
                  style: {
                    color: cydItem.material.polygon.color || 'FCC152',
                    alpha: cydItem.material.polygon.alpha || 0.5
                  },
                  label: {
                    text: cydItem.name,
                    textStyle: {
                      fillColor: cydItem.material.label.fillColor || '#d31313',
                      outlineColor: cydItem.material.label.outlineColor || '#ffffff',
                    }
                  }
                })
            });
          })
        })
        this.addGisLayer(mergedPolygon, htmlData);
      });
    },

    addGisLayer(mergedPolygon, htmlData) {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.addNativePolygon(mergedPolygon,htmlData);
      }
    },

    clearGisLayer() {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.clearAllVectorLayer();
      }
    },


    getMultiPolygonByCode(code) {
      const feature = this.xzqhData.features.find(feature => feature.properties.code === code);
      if (feature) {
        return feature;
      } else {
        return null; // 如果找不到匹配的code，返回null
      }
    },
    iconChange(data) {
      this.showGisLayer(data, this.industryLayerData, 0);
    },
  },
  data() {
    return {
      projectLayerData,
      industryLayerData,
      xzqhData,
      box1:[qy,ymjd,zzjd],
      // 数据看板-项目区信息概览
      xmgl:[],
      // 数据看板-项目区企业分布概览
      qyfbgl:[],
      layerType:'',
      projectList:[],
      sxbars: {
        xAxisData: [
          "安化县",
          "保靖县",
          "桑植县",
          "古丈县",
          "石门县",
          "沅陵县",
          "桃源县",
          "新化县",
        ],
        seriesData: [
          { value: 14722, name: "安化县" },
          { value: 8570, name: "保靖县" },
          { value: 7301, name: "桑植县" },
          { value: 7000, name: "古丈县" },
          { value: 6825, name: "石门县" },
          { value: 6690, name: "沅陵县" },
          { value: 6400, name: "桃源县" },
          { value: 5000, name: "新化县" },
        ],
      },
      // 数据看板-茶园面积趋势分析
      sxbars2: {
        xAxisData: [],
        seriesData: [],
      },
      //数据看板-茶产量趋势分析
      sxbars3: {
        xAxisData: [],
        seriesData: [],
      },
      //数据看板-产业产值趋势分析
      sxbars4: {
        xAxisData: [],
        seriesData: [],
      },
      leftList: [],
      line,
      barsline,
    };
  },
  created() {
    this.layerType = this.$route.query.layerType ? this.$route.query.layerType : '0';
    let projectList = [
      {name: '早熟油菜', value: '0', checked: false},
      {name: '茶叶', value: '1', checked: false},
      {name: '洞庭香米', value: '2', checked: false},
      {name: '中药材', value: '3', checked: false}
    ];
    this.projectList = this.layerType < 4 ?  [projectList[this.layerType]] : [];
    this.leftList = [
      { name: '数据看板', key: '/bigScreen1?layerType=' + this.layerType },
      {
        name: '驾驶舱', key: '/bigScreen1/jiashicang?layerType=' + this.layerType,
      },
      { name: '挂图作战检测', key: '/bigScreen1/guatuzz?layerType=' + this.layerType },
    ]
    this.getSjkb();
  }
};
</script>
<style scoped lang="scss">
.num,
.zb {
  color: #fff;
}
.jdfj {
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.jdfl {
  align-items: center;
  .right {
    margin-top: 15px;
    .bottom {
      margin-top: 20px;
    }
  }
}
.jdfl-two {
  margin-top: 30px;
}
.bg-box-1 {
  width: 113.33px;
  height: 177px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // padding: 24px;
  gap: 16px;
  flex-grow: 1;

  background: linear-gradient(180deg, rgba(59, 214, 172, 0.1) 0%, rgba(59, 214, 172, 0) 100%);

  z-index: 0;
  .bg-box-1-icon,.bg-box-1-number,.bg-box-1-text {
    display: flex;
    justify-content: center;
  }
  .bg-box-1-number .color {
    font-family: DIN;
    font-size: 22px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0em;

    background: linear-gradient(180deg, #D5FFF5 15%, #8CD9C5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 0;
  }
  .bg-box-1-number .unit {
    opacity: 0.8;
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: 350;
    line-height: 14px;
    letter-spacing: 0em;

    /* 纯白 */
    color: #FFFFFF;

    z-index: 1;
    margin-left: 8px;
  }
  .bg-box-1-text span {
    opacity: 1;
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;

    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    /* 文字白 */
    color: #FFFFFF;

    z-index: 1;
  }
}
</style>
